body{background: #252525}
html, body { font-size: 50px;}
@media (min-width: 0px) and (max-width:319px){html{font-size: 42.667px;}}
@media (min-width: 320px) and (max-width:320px){html{font-size: 42.667px;}}
@media (min-width: 321px) and (max-width:360px){html{font-size: 48px;}}
@media (min-width: 361px) and (max-width:375px){html{font-size: 50px;}}
@media (min-width: 376px) and (max-width:412px){html{font-size: 54.933px;}}
@media (min-width: 413px) and (max-width:414px){html{font-size: 55.2px;}}
@media (min-width: 415px) and (max-width:540px){html{font-size: 72px;}}
@media (min-width: 541px) and (max-width:600px){html{font-size: 80px;}}
@media (min-width: 601px) and (max-width:750px){html{font-size: 100px;}}
@media (min-width: 751px) and (max-width:900px){html{font-size: 120px;}}
@media (min-width: 901px) and (max-width:1000px){html{font-size: 133.33px;}}
@media (min-width: 1001px) and (max-width:1100px){html{font-size: 146.67px;}}
@media (min-width: 1101px) and (max-width:1200px){html{font-size: 160px;}}

header{margin-top: 0.6rem;width: 100%;padding-left: 0.42rem;padding-right: 0.42rem;box-sizing:border-box}
.title{font-size: 0.4rem;color: #fff;float: left;line-height: 0.4rem}
.resetwifi{font-size: 0.3rem;line-height: 0.4rem;float: right;color: #1EA5FF;display: none}
.step{margin-top: 0.7rem;padding-bottom: 0.4rem;height: 1rem;margin-left: 0.6rem}
.iconbar ul li{display: block;float: left;height: 1rem;width: 1rem;position: relative;text-align: center;}
.iconbar ul li > span{position: absolute;top: 50%;left: 50%;font-size: 0.32rem;color: #252525}
.linewarp{width: 0.72rem !important}
.iconwarp > span{position: absolute;top: 50%;left: 50%}
.iconblue{width: 1rem !important;height: 1rem !important;background: url(../img/bluebox.png) !important;margin-top: -0.5rem !important;margin-left: -0.5rem !important;line-height: 1rem !important;background-size: 100% 100% !important;}
.icon{width: 0.7rem;height: 0.7rem;background: url(../img/garybox.png);background-size: 100% 100%;margin-top: -0.35rem;margin-left: -0.35rem;line-height: 0.7rem}
.line{width: 22px;height: 1px;background: #333333;display: block;text-align: center;margin-top: -0.5px;margin-left: -11px}
.blueline{background: #1A8BE2};
.setppage{margin-top: 0.4rem}
.setppage-line{height: 0.26rem;background-color: #202020}
.setppage-1{font-size:0.34rem;color: #C8C8C8;height: 100%;}
.point{height: 1rem;line-height: 1rem;border-bottom: 0.02rem solid #1E1E1E;padding-left: 0.42rem;padding-right: 0.42rem;}
.setppage-1 ul{padding-left: 0.42rem;padding-right: 0.42rem;}
.setppage-1 ul li{display: block;height: 1rem;line-height: 1rem;border-bottom: 0.02rem solid #1E1E1E;}
.wifi{font-size: 0.2rem;text-align: center; margin-top: 1rem ;color: #B54141}
.wifi img{width: 0.2rem;height: 0.2rem;vertical-align: middle}
.wifi .btn{font-size: 0.35rem;color:#1EA5FF ;margin-top: 0.2rem}
.btn1{position: fixed;width:100%;border: none;outline: none;background-color:#252525;color: #666666 ;text-align: center;bottom: 1rem;}
.setppage-2 .refresh-box{font-size: 0.26rem; float: right;text-align: center;margin: 0.38rem}
.setppage-2 {display: none;}
.setppage-2 .refresh-box .refresh{color: #BCBCBC;font-size: 0.4rem}.setppage > div{display: none}
.setppage-3 .refresh-box{font-size: 0.26rem; float: right;text-align: center;margin: 0.38rem}
.setppage-3 {display: none;}
.setppage-3 .refresh-box{font-size: 0.26rem; float: right;text-align: center;margin: 0.38rem}
.setppage-3 {display: none;}
.setppage-3 .refresh-box .refresh img{font-size: 0.26rem;color: #1EA5FF;}
.setppage-3 .refresh-box span{font-size: 0.26rem;color: #666666}
.setppage-2 .refresh-box .refresh{color: #BCBCBC;font-size: 0.4rem}
.setppage-2 .refresh-box .refresh img{font-size: 0.26rem;color: #1EA5FF;}
.setppage-2 .refresh-box span{font-size: 0.26rem;color: #666666}
.stepinput{display: none}
.errortips{color: #B54141;font-size: 0.24rem;text-align: left;margin-left: 0.38rem;margin-top: 0.1rem;display: none}
.refresh{font-size: 0.7rem;color: #fff}
/* 扫描 */
.radar {
  background: -webkit-repeating-radial-gradient(rgba(32, 255, 77, 0) -7%, rgba(32, 255, 77, 0) 18%, #4D4D4D 18.6%, rgba(32, 255, 77, 0) 18.9%), -webkit-linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, rgba(32, 255, 77, 0) 50.2%), -webkit-linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, rgba(32, 255, 77, 0) 50.2%);
  /* background: radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%); */
  width: 4.04rem;
  height: 4.04rem;
  max-height: 4.04rem;
  max-width: 4.04rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top:-0.38rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 0.02rem solid #4D4D4D;
  overflow: hidden;
  font-size: 0.28rem;
  /* line-height: 0.5rem; */
  
}
.radar:before {
  content: ' ';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* animation: blips 5s infinite; */
  animation-timing-function: linear;
  animation-delay: 1.4s;
}
.radar:after {
  content: ' ';
  display: block;
  background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #4D4D4D 100% );
  width: 50%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
  animation: radar-beam 5s infinite;
  animation-timing-function: linear;
  transform-origin: bottom right;
  border-radius: 100% 0 0 0;
  border-right:1px solid #4D4D4D;
  z-index: 1;
}

.radar > span{
  width: 36%;
  height: 36%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -18%;
  margin-left: -18%;
  border: 1px solid #4D4D4D;
  background: #202020;
  border-radius: 50%;
  z-index: 2;text-align: center;color: #7A7A7A;    padding-top: 5px;
  box-sizing: border-box;
}

@keyframes radar-beam {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes blips {
  14% {
    background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
  }
  14.0002% {
    background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
  }
  25% {
    background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
  }
  26% {
    background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
    opacity: 1;
  }
  100% {
    background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
  }
}
  
/* 弹出层 */
.modal{font-size: 0.3rem;    display: -none;position: fixed; z-index: 1; left: 0;bottom: 0; overflow: auto; background-color: rgb(255,255,255); 
   border-top-left-radius: 0.22rem;border-top-right-radius: 0.22rem; animation-name: fadeIn;animation-duration: 0.4s}
   .modallist{width: 7.5rem; height: 5.96rem; display:none}
   .modallist .modal-header{height: 1.12rem;line-height: 1.12rem;border-bottom: 0.02rem solid #EBEBEB;padding-left: 0.38rem;color: #BDBDBD}
   .popbox .modal-header .close{float: right;margin-right: 0.38rem;font-size: 0.5rem;color: #B2B2B2}
   .modallist .modal-body{height: 3.7rem;color: #333333;}
   .modallist .modal-body p{padding-right: 0.38rem;padding-left: 0.38rem;padding-top: 0.38rem}
   .modallist .modal-body p span{color: #B54141}
   .modallist .modal-footer{height: 1.12rem;line-height: 1.12rem;text-align: center;color: #1B1B1B;background-color: #F3F3F3;}
   /* 网络连接 */
   .modalnetwork{width:7.5rem;height: 3.92rem; display: none}
   .modalnetwork .modal-header{height: 1.12rem;line-height: 1.12rem;border-bottom: 0.02rem solid #EBEBEB;padding-left: 0.38rem;color: #B0B0B0}
   .modalnetwork .modelboxlist{height: 2.8rem;overflow-y: auto;}
   .modalnetwork .modelboxlist::-webkit-scrollbar{width:3px;}
   .modalnetwork .modelboxlist::-webkit-scrollbar-track{background-color:#ccc;border-radius: 10px;}
   .modalnetwork .modelboxlist::-webkit-scrollbar-thumb{background-color:#999; border-radius: 10px; height: 5px}
   .modalnetwork .modelboxlist::-webkit-scrollbar-thumb:hover {background-color:#666}
   .modalnetwork .modelboxlist::-webkit-scrollbar-thumb:active {background-color:#666}
   .modalnetwork .modal-body .modal-body-box {font-size: 0.32rem;height: 1.4rem;line-height:0.7rem;  border-bottom: 0.02rem solid #EBEBEB;margin-left: 0.38rem;margin-right: 0.38rem}
   .modalnetwork .modal-body .modal-body-box img{float: right;margin-top: 0.6rem;}
   .modalnetwork .modal-body .modal-body-box .coding{font-size: 0.28rem;color: #BDBDBD}

   .modalpossessor{width:7.5rem;height: 5.96rem; display: none}
   .modalpossessor .modal-header{height: 1.12rem;line-height: 1.12rem;border-bottom: 0.02rem solid #EBEBEB;padding-left: 0.38rem;color: #B0B0B0}
   .modalpossessor .modal-body .belong{color: #333333;margin: 0.38rem}
   .modalpossessor .modal-body .tip{color: #B54141;margin: 0.38rem}
   .modalpossessor .modal-body ul li{color: #333333;margin-left:0.38rem}
   .modalpossessor .modal-body .help{color: #1EA5FF;margin-left:0.38rem;margin-top: 0.48rem}
   .modalbinding {width:7.5rem;height: 5.96rem;display: none }
   .modalbinding .modal-header{font-size: 0.34rem;height: 1.12rem;line-height: 1.12rem;text-align: center; border-bottom: 0.02rem solid #EBEBEB;color: #333333}
   .modalbinding .modal-body .box{height: 0.66rem;line-height: 0.66rem;padding-left: 0.38rem;font-size: 0.28rem; color:#B0B0B0;background-color: #F6F6F6}
   .modalbinding .modal-body .tel,.modalbinding .modal-body .code{height: 1rem;line-height: 1rem;border-bottom: 0.02rem solid #EBEBEB;margin-right:0.38rem;margin-left: 0.38rem}
   .modalbinding .modal-body input{border: none}
   .modalbinding .modal-body .obtain{font-size: 0.32rem;color: #1EA5FF;float: right;margin-right: 0.38rem;}
   ::-webkit-input-placeholder {  color: #C9C9C9;font-size:0.3rem;}
   ::-moz-placeholder {  color: #C9C9C9;font-size:0.3rem;}
   ::-ms-input-placeholder {color: #C9C9C9;font-size: 0.3rem;}
   .modalbinding .modal-footer{text-align: center;color: #1A8BE2;font-size: 0.34rem;margin-top: 0.4rem;}
   .modalunbundling {width:7.5rem;height: 5.96rem;display: none }
   .modalunbundling .modal-header{font-size: 0.34rem;height: 1.12rem;line-height: 1.12rem;text-align: center; border-bottom: 0.02rem solid #EBEBEB;color: #333333}
   .modalunbundling .modal-body li{margin: 0.38rem;}
   .modalunbundling .modal-body li span{color: #1EA5FF}
   .show{display: block}